<template>
	<view>
		<!-- <PCProjectDetail v-if="isPc"></PCProjectDetail> -->
		<view class="nav-bar">
			<NavBar>
				<navigator open-type="navigateBack" hover-class="none" class="nav-back-view" slot="left">
					<image src="/static/nav-back-icon.png" class="nav-back"></image>
				</navigator>
				<view slot="center" class="tabBar-view">
					<view class="tabBar-item" :class="{'tabBar-active': tabBarActive == 1}" @click="tabBarActive = 1">
						预约出资
					</view>
					<view class="tabBar-item" :class="{'tabBar-active': tabBarActive == 2}" @click="tabBarActive = 2">
						项目说明
					</view>
				</view>
			</NavBar>
		</view>
		<block v-if="tabBarActive == 2">
			<view style="height: 18upx;"></view>
			<view class="rich-view">
				<rich-text :nodes="entity.instructions"></rich-text>
			</view>
			<view style="height: 32upx;"></view>
		</block>
		<block v-else-if="entity.projectId">
			<view class="card-bg"></view>

			<view class="card-view">
				<image :src="`/static/home-state-icon-${entity.status}.png`" class="state-icon"></image>
				<view class="card-title">
					<view class="title-tag" :style="{background:entity.projectTypeVO.backgroundColor }">
						{{entity.projectTypeVO.name}}
					</view>
					<view class="title-text">{{entity.name}}</view>
				</view>

				<view class="cell-view">
					<view class="cell-item">
						<view class="label-text" style="color: #FF442F;">
							{{entity.minEarningsRate}}-{{entity.maxEarningsRate}}%
						</view>
						<view class="value-text">约定回报(年化)</view>
					</view>
					<view class="division"></view>
					<view class="cell-item">
						<view class="label-text">{{entity.initialDeliveryAmount || 0}}</view>
						<view class="value-text">出资金额(万元起)</view>
					</view>
					<view class="division"></view>
					<view class="cell-item">
						<view class="label-text">{{entity.issueScaleAmount || 0}}</view>
						<view class="value-text">发行规模(万元)</view>
					</view>
				</view>

				<view class="card-content">
					<view class="text-view">
						<view class="text-item">出资总额 : {{entity.sellAmount}}万元</view>
						<view class="text-item">出资笔数 : {{entity.sellCount}}笔</view>
						<view class="text-item" style="margin-left: 92upx;">剩余 : {{entity.remainingScale || 0}}%</view>
					</view>
					<view class="progress-view">
						<view class="progress-item" :style="{'--width': `${entity.remainingScale || 0}%`}"></view>
					</view>
				</view>
			</view>
			<view class="headline-text">预约/购买金额</view>
			<view class="form-view">
				<view class="form-content">

					<view class="form-select" @click="isPicker = true">
						<input v-model="projectInfoRestrict.value" placeholder="请选择" class="input-css"
							placeholder-class="plac-css" disabled />
						<uni-icons type="right" color="#BDB2AA" size="24upx"></uni-icons>
					</view>
					<view class="form-item">
						<input type="digit" v-model="subscriptionAmount" placeholder="请输入出资金额" class="input-css"
							placeholder-class="plac-css" confirm-type="done" @blur="getExpectAnnualIncome"
							@confirm="getExpectAnnualIncome" />
						<view class="unit-text">万元</view>
					</view>
				</view>

				<view class="form-desc">
					<image src="/static/litre-icon.png" class="desc-icon"></image>
					<view>约定回报(年化) :</view>
					<view style="color: #FF2615;margin-left: 9upx;">{{earningsRate || '--'}}%</view>
				</view>
			</view>
			<view class="headline-text">
				<view>指定账户</view>
				<view class="copy-view"
					@click="copyEvent(`账户名称: ${projectAccount.accountName} 银行账号: ${projectAccount.bankNumber} 开户银行:${projectAccount.openBank}`)">
					<image src="/static/copy-icon.png" class="copy-icon"></image>
					<view>一键复制</view>
				</view>
			</view>

			<view class="account-view">
				<view class="account-item">
					<view class="account-label">账户名称</view>
					<view class="account-text">{{projectAccount.accountName}}</view>
				</view>
				<view class="account-item">
					<view class="account-label">银行账号</view>
					<view class="account-text">{{projectAccount.bankNumber}}</view>
				</view>
				<view class="account-item">
					<view class="account-label">开户银行</view>
					<view class="account-text">{{projectAccount.openBank}}</view>
				</view>
			</view>
			<view style="height: 260upx;"></view>
			<FloatView v-if="entity.buyFlag == '10' || entity.reserveFlag == '10'">
				<view class="float-button">
					<view v-if="entity.buyFlag == '10'" @click="onAppointRegister('20')" class="button-item">充值购买</view>
					<view v-if="entity.reserveFlag == '10'" @click="onAppointRegister('10')"
						class="button-item button-active">预约登记</view>
				</view>
			</FloatView>
		</block>
		<PickerCustom v-if="isPicker" :list="entity.projectInfoRestrictList" title="出资期限（月）" @cancel="isPicker = false"
			@confirm="onPickerChange"></PickerCustom>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPicker: false,
				detailId: '',
				tabBarActive: 1,
				subscriptionAmount: '', // 预约购买金额
				earningsRate: '', // 预约购买 计算的 回报率
				projectAccount: {
					accountName: "",
					bankNumber: "",
					openBank: "",
				},
				projectInfoRestrict: {
					infoRestrictId: '',
					value: '',
					index: 0
				},
				entity: {
					projectId: "",
					name: "",
					issueScaleAmount: 0,
					initialDeliveryAmount: 0,
					sellAmount: 0,
					instructions: "",
					minEarningsRate: 0,
					maxEarningsRate: 0,
					remainingScale: 0,
					buyFlag: '20', // 是否开启购买 10是 20否
					reserveFlag: '20', // 是否开启预约 10是 20否
					projectInfoRestrictList: [],
					projectTypeVO: {
						name: "",
						backgroundColor: "",
					}
				}
			}
		},
		onLoad(options) {
			this.detailId = options.detailId
			this.getRequestDetail()
		},
		methods: {
			async getRequestDetail() {
				uni.$util.showLoading()
				const res = await uni.$api.getProjectDetail(this.detailId).finally(uni.finally)
				res.data.projectInfoRestrictList.forEach(item => {
					item.label = item.restrictName,
						item.value = item.restrictName - 0
				})
				this.entity = res.data
				const account = await uni.$api.getProjectBankDetail(res.data.projectAccountId)
				this.projectAccount = account.data
			},
			/**
			 * 计算 预约购买 金额
			 */
			async getExpectAnnualIncome() {
				if (!this.subscriptionAmount || !this.projectInfoRestrict.infoRestrictId) return this.earningsRate = 0;
				const res = await uni.$api.getExpectAnnualIncome({
					subscriptionAmount: this.subscriptionAmount,
					infoRestrictId: this.projectInfoRestrict.infoRestrictId
				})
				this.earningsRate = res.data
			},
			/**
			 * 预约登记 / 充值购买
			 */
			onAppointRegister(type) {
				const infoRestrictId = this.projectInfoRestrict.infoRestrictId
				const subscriptionAmount = this.subscriptionAmount
				if (!subscriptionAmount || !infoRestrictId) {
					return uni.$util.showToast('请选择预约/购买金额')
				}
				const param =
					`?type=${type}&projectId=${this.detailId}&infoRestrictId=${infoRestrictId}&subscriptionAmount=${subscriptionAmount}`
				uni.navigateTo({
					url: '/pages/appointRegister/appointRegister' + param
				})
			},
			onPickerChange(event) {
				event.item.index = event.index
				this.projectInfoRestrict = event.item
				this.isPicker = false
				this.getExpectAnnualIncome()
			},
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 20;

		.nav-back-view {
			@extend .column;

			.nav-back {
				width: 43upx;
				height: 43upx;
			}
		}

		.tabBar-view {
			@extend .row;

			.tabBar-item {
				font-size: 25rpx;
				font-weight: 400;
				color: white;
				transition: all 0.3s;
				position: relative;
				@extend .column;

				&:before {
					content: "";
					width: 47rpx;
					height: 4px;
					position: absolute;
					bottom: -10upx;
					transition: all 0.3s;
				}
			}

			.tabBar-item+.tabBar-item {
				margin-left: 40upx;
			}

			.tabBar-active {
				font-size: 33rpx;
				font-weight: 600;

				&:before {
					background: white;
				}
			}
		}

	}

	.card-bg {
		width: 100%;
		height: 100upx;
		background: #FF2615;
	}

	.rich-view {
		width: 707rpx;
		margin: 0 auto;
		min-height: calc(100vh - 166upx);
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 29upx;
	}

	.card-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 18upx;
		padding-top: 0;
		margin-top: -80upx;
		position: relative;

		.state-icon {
			width: 132upx;
			height: 132upx;
			position: absolute;
			right: -14upx;
			bottom: -14upx;
		}

		.card-title {
			width: 100%;
			padding: 24upx 0;
			@extend .row-start;
			padding-bottom: 24upx;
			border-bottom: 1px solid #F7E8E4;

			.title-tag {
				padding: 4upx 9upx;
				background: #69442E;
				border-radius: 7rpx;
				font-size: 22rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-right: 12upx;
			}

			.title-text {
				flex: 1;
				font-size: 33rpx;
				font-weight: 500;
				color: #2C1101;
				@extend .text-dot;
			}
		}

		.cell-view {
			width: 100%;
			padding: 27upx 22upx;
			@extend .row-between;
			align-items: flex-end;

			.cell-item {

				.label-text {
					font-weight: bold;
					font-size: 36rpx;
					color: #69442E;
				}

				.value-text {
					font-weight: 600;
					font-size: 22rpx;
					color: #69442E;
				}
			}

			.division {
				width: 1px;
				height: 25rpx;
				background: #F7E8E4;
				margin-bottom: 5upx;
			}
		}

		.card-content {
			width: 100%;
			padding: 29upx 22upx;
			background: #FFF8F4;
			border-radius: 7rpx;

			.text-view {
				width: 100%;
				@extend .row-start;

				.text-item {
					font-weight: 400;
					font-size: 22rpx;
					color: #B38569;
				}

				.text-item+.text-item {
					margin-left: 40upx;
				}
			}

			.progress-view {
				width: 482rpx;
				height: 14rpx;
				background: #F1E6DF;
				border-radius: 7rpx;
				margin-top: 22upx;

				.progress-item {
					width: var(--width);
					height: 14rpx;
					background: #FF442F;
					border-radius: 7rpx;
				}
			}
		}

	}

	.headline-text {
		position: relative;
		padding: 22upx 51upx;
		font-weight: 600;
		font-size: 29rpx;
		color: #2C1101;
		margin-top: 14upx;
		@extend .row-between;

		.copy-view {
			@extend .row;
			font-size: 25rpx;
			color: #FF2615;

			.copy-icon {
				width: 29upx;
				height: 29upx;
				margin-right: 7upx;
			}
		}

		&:before {
			content: "";
			width: 56rpx;
			height: 14rpx;
			background: rgba(255, 38, 21, 0.1);
			position: absolute;
			left: 51upx;
			bottom: 22upx;
		}
	}

	.form-view {
		width: 707rpx;
		margin: 0 auto;
		padding: 29upx;
		background: #FFFFFF;
		border-radius: 14rpx;

		.form-content {
			width: 100%;
			@extend .row-between;

			.form-select {
				width: 197rpx;
				height: 91rpx;
				background: #FFFFFF;
				border-radius: 7rpx;
				border: 1rpx solid #F7E8E4;
				@extend .row;
				padding: 0 25upx;

				.input-css {
					flex: 1;
					font-weight: 600;
					font-size: 33rpx;
					color: #2C1101;
				}

				.plac-css {
					font-weight: 400;
					font-size: 33rpx;
					color: #B8ACA3;
				}
			}

			.form-item {
				width: calc(100% - 197upx - 18upx);
				height: 91rpx;
				padding: 0 25upx;
				background: #FFFFFF;
				border-radius: 7rpx;
				border: 1rpx solid #F7E8E4;
				@extend .row;

				.input-css {
					flex: 1;
					font-size: 33rpx;
					color: #2C1101;
				}

				.plac-css {
					font-weight: 400;
					font-size: 33rpx;
					color: #B8ACA3;
				}
			}
		}

		.form-desc {
			width: 100%;
			background: #FFF7F4;
			border-radius: 7rpx;
			padding: 22upx 18upx;
			@extend .row-start;
			font-weight: 400;
			font-size: 25rpx;
			color: #2C1101;
			margin-top: 18upx;

			.desc-icon {
				width: 27upx;
				height: 27upx;
				margin-right: 9upx;
			}
		}
	}

	.account-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 0 29upx;

		.account-item {
			width: 100%;
			padding: 29upx 0;
			@extend .row-between;

			.account-label {
				width: 160upx;
				font-weight: 400;
				font-size: 29rpx;
				color: #B8ACA3;
			}

			.account-text {
				width: calc(100% - 160upx);
				font-weight: 400;
				font-size: 29rpx;
				color: #2C1101;
				@extend .text-dot;
			}
		}

		.account-item+.account-item {
			border-top: 1px solid #F7E8E4;
		}
	}

	.float-button {
		width: 100%;
		padding: 0 22upx;
		@extend .row;

		.button-item {
			width: calc(100% / 2 - 9upx);
			height: 91rpx;
			border-radius: 45rpx;
			background: linear-gradient(180deg, #FFAC65 0%, #FF8315 100%);
			@extend .column;
			font-size: 29rpx;
			font-weight: 500;
			color: #FFFFFF;
		}

		.button-item+.button-item {
			margin-left: 9upx;
		}

		.button-active {
			background: linear-gradient(180deg, #FF7065 0%, #FF2615 100%);
			border-radius: 45rpx;
		}
	}
</style>